<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no viewport-fit=cover" />
		<link href="../../Common/css/ufun.css" rel="stylesheet" />
		<link href="../../Common/css/table-list.css" rel="stylesheet" />
		<script src="../../Common/js/jump.js"></script>
		<script src="../../Common/js/tools.js"></script>
		<script src="../../Common/js/table-list.js"></script>
		<script src="../../Common/js/lib/jquery-3.4.1.min.js"></script>
		<script src="../../Common/js/lib/materialize.min.js"></script>
		<link href="../../Common/css/lib/materialize.min.css" rel="stylesheet">
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<style type="text/css">
			header {
				margin-top: -10vw !important;
				background: var(--color-white);
				position: fixed !important;
				/* box-shadow: 0 0 5px var(--color-gray-medium); */
				border-bottom: 1px solid var(--color-gray-white);
				margin-bottom: 0;
				overflow-y: visible !important;
			}
			
			body {
				background: var(--color-gray-white);
				margin-top: 15vw;
				overflow-y: visible !important;
				height: auto;
			}
			
			.Card {
				padding: 0;
				height: 15vw;
			}

			.followee-nick {
				font-size: 4vw;
				top: 0;
				right: 6vw;
				width: calc(100% - 22.5vw);
				padding-left: 3vw;
				margin: 0;
				line-height: 15vw;
				display: block;
				overflow: hidden;
				word-break: keep-all;
				font-weight: bold;
			}

			.followee-head-img {
				display: block;
				opacity: 0;
				top: 2.5vw;
				left: 7.5vw;
				height: 10vw;
				width: 10vw;
				margin: 0;
				border-radius: 100%;
				border: 1px solid #999999;
			}

			@keyframes Head_img_make_done {
				0% {
					opacity: 0;
				}

				100% {
					opacity: 1;
				}
			}

			.Done .followee-head-img {
				opacity: 1;
				animation: Head_img_make_done;
				animation-duration: 1s;
			}

			#followList,
			#BadPage {
				display: none;
			}
			
			.content{
				display: block;
				overflow-y: scroll;
				padding-top: 0 !important;
				top: 28vw;
				height: fit-content;
			}
			
			.list-card{
				width: inherit;
				display: none;
			}
			
			.card-content{
				align-items: center;
				display: flex;
				width: 100%;
				height: 15vw;
				border-bottom: 1px solid var(--color-gray-white);
				padding-left: 6vw;
				background-color: var(--color-white);
			}
			
			.list-card-ul{
				height: 15vw;
			}
			
			#no-info-yet{
				height: 20vw !important;
				display: none;
				width: 100%;
				font-size: 4vw;
				color: var(--color-gray-light);
				text-align: center;
				padding: 20vw;
				position: absolute;
			}
			
		</style>
	</head>

	<body>
		<!-- 消息卡片模板 -->
		<div class="temp" id="FollowTemplate">
			<li class="card-content" quesId="0">
				<img class="followee-head-img" />
				<div class="followee-nick">关注</div>
			</li>
		</div>
		<!-- 顶栏 -->
		<header>
			<div id="Left" class="com-btn" onmouseup="ThisClose();">
				<i class="material-icons">keyboard_arrow_left</i>
			</div>
			<p id="Title">我的关注</p>
		</header>
		<!-- 消息列表 -->
		<div class="content">
			<div class="list-card-holder">
				<ul id="followList">
				</ul>
			</div>
			
			<div id="BadPage" style="text-align: center; color: gray;">
				<h5>网络错误</h5>
				<h5>请检查网络连接后重新加载</h5>
			</div>
		</div>
		
		<div id="no-info-yet">
			你暂时没有关注其他牛人呢，快去看看牛人们的讲座认识他们吧！
		</div>
	</body>

	<script type="text/javascript">
		var userHash;
		var Current;
		var UserInfo;
		var followList = document.getElementById("followList");

		document.addEventListener("plusready", function () {
			GetStatusTop();
			DoWait();
			current = plus.webview.currentWebview();
			RefreshUserInfo(function (phoneNo) {
				PhoneNo = phoneNo;
				drawPage();
			});
			userHash = plus.storage.getItem("userHash");
			DoShow(current);
		});
		
		function drawPage() { 
			UserInfo = plus.storage.getItem("userInfo");
			if (!UserInfo)
				return;
			UserInfo = JSON.parse(UserInfo);
			var num = UserInfo["uFollowCnt"];
			showList(); 
			showScroll()
			hide(num);
		};
		
		function showScroll() {
			if ($("#followList li").length > 10) {
				$("content").css("height", "100%");
			}
		}
		
		function hide(num) {
			if(num == 0){
				$("#no-info-yet").css("display","unset");
			} else {
				$(".list-card-holder").css("display","unset");
			}
		}

		function showList() {
			DoWait();
			CallAJAX('listFollow', {
				'userHash': userHash
			}, function(data) { // success
				DontWait();
				BadPage.style.display = "none";

				for (let i in data["followsList"]) {
					setTimeout(function() {
						addFollowCard(data["followsList"][i], 0);
					}, 50 * i);
				}
			}, function() { // error
				DontWait();
				followList.style.display = "none";
				BadPage.style.display = "block";
			});
		}

		function addFollowCard(follow) {
			var newFollow = document.getElementById("FollowTemplate").lastElementChild.cloneNode(true);

			newFollow.setAttribute("uid", follow["uId"]);
			newFollow.onclick = function() {
				JumpToUserIndex(newFollow.getAttribute("uid"), '../../');
			}
			newFollow.getElementsByClassName("followee-nick")[0].innerText = follow["uNick"];
			newFollow.getElementsByClassName("followee-head-img")[0].src = SERVER_LOC + follow["uHeadImgLoc"];
			followList.appendChild(newFollow);
			newFollow.classList.add("Done");

			followList.style.display = "block";
		}
	</script>

</html>
